js代码与html代码分离示例

简介: 验证用户名是否存在的示例代码引出该思想:Insert title here            // 方式一:使用文本框的onblur事件(失去焦点事件)//         function ckName() {//             // 通过标签名获取元素节点对象//             var name = document.
验证用户名是否存在的示例代码引出该思想:
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script>

<title>Insert title here</title>

    <script type="text/javascript">
        // 方式一:使用文本框的onblur事件(失去焦点事件)
//         function ckName() {
//             // 通过标签名获取元素节点对象
//             var name = document.getElementsByTagName("input")[0];
//             // 创建XMLHttpRequest对象
//             var xhr = getXMLHttpRequest();
//             // 处理响应结果,创建回调函数,根据响应状态动态更新页面
//             xhr.onreadystatechange = function() {
//                 if (xhr.readyState == 4) { // 说明客户端请求一切正常
//                     if (xhr.status == 200) { // 说明服务器响应一切正常
//                         // alert(xhr.responseText); // 得到响应结果,得到页面上面的结果,注意结果为字符串
//                         var msg = document.getElementById("msg");
//                         if (xhr.responseText == "true") {
//                             // msg.innerText = "用户名已存在";
//                             msg.innerHTML = "<font color='red'>该用户名已存在</font>";
//                         } else {
//                             msg.innerHTML = "<font color='green'>该用户名可以使用</font>";
//                         }
//                     }
//                 }
//             } 
//          

//             // 建立一个连接
//             xhr.open("get", "${pageContext.request.contextPath}/servlet/ckNameServlet?name=" + name.value);
//             // 发送请求
//             xhr.send(null);
//         }

        // 方式二:不使用文本框的事件
        // onload   加载完毕的事件,等到页面加载完毕后再执行onload事件所指向的函数。
        window.onload = function() {
            // 通过名获取元素对象
            var nameElement = document.getElementsByName("userName")[0];

            nameElement.onblur = function() {
                var name = this.value; // this等价于nameElement

                // 创建XMLHttpRequest对象
                var xhr = getXMLHttpRequest();
                // 处理响应结果,创建回调函数,根据响应状态动态更新页面
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) { // 说明客户端请求一切正常
                        if (xhr.status == 200) { // 说明服务器响应一切正常
                            // alert(xhr.responseText); // 得到响应结果,得到页面上面的结果,注意结果为字符串
                            var msg = document.getElementById("msg");
                            if (xhr.responseText == "true") {
                                // msg.innerText = "该用户名已存在";
                                msg.innerHTML = "<font color='red'>该用户名已存在</font>";
                            } else {
                                msg.innerHTML = "<font color='green'>该用户名可以使用</font>";
                            }
                        }
                    }
                }
           
                // 建立一个连接
                xhr.open("get""${pageContext.request.contextPath}/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime());
                // 发送请求
                xhr.send(null);
            }
        }
    
</script>

</head>
<body>
    <!-- 文本框的onblur事件(失去焦点事件) -->
    <!-- 用户名:<input type="text" name="userName" onblur="ckName()"/><span id="msg" ></span></br> 
        为了使得页面的标签变得干净,事件不写在标签上。即js代码与html代码分离。
    -->

    用户名:<input type="text" name="userName" /><span id="msg" ></span></br>
    密码:<input type="password" name="pwd" /></br>
</body>
</html>

我的GitHub地址: https://github.com/heizemingjun
我的博客园地址: http://www.cnblogs.com/chenmingjun
我的蚂蚁笔记博客地址: http://blog.leanote.com/chenmingjun
Copyright ©2018 黑泽明军
【转载文章务必保留出处和署名,谢谢!】
相关文章
|
4天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
16 0
|
12天前
|
前端开发 JavaScript CDN
HTML代码约定
HTML代码约定
22 0
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js的基于HTML5的问卷调查系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的基于HTML5的问卷调查系统附带文章和源代码设计说明文档ppt
7 0
|
4天前
|
前端开发 JavaScript
HTML标签导读及实用代码实例
HTML标签导读及实用代码实例
12 0
|
5天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
10天前
|
Web App开发 监控 JavaScript
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
实现JavaScript鼠标框选内容上报,需关注`Range`和`Selection`对象,处理各种元素选择情况,如文本、图片、输入框等。事件监听包括`mousedown`、`mouseup`、`selectionchange`等,用`debounce`防止频繁触发。通过`Range`获取选中内容,判断是否包含特定标签,决定返回HTML或文本。完整代码示例展示了如何实现这一功能。
18 0
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
|
10天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
17 1
|
18天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
29 0
HTML5/CSS3粒子效果进度条代码
|
3天前
|
前端开发
HTML CSS
HTML CSS
11 0
|
5天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。